<template>
  <div id="main" class="bx">
    <header>
      <div class="header_left">电子班牌管理平台</div>
      <div class="header_right" @mouseenter="showFlag">您好,{{name}}
        <img src="static/images/head.png" alt="" class="bx">
        <div class="header_infoBox_mask" @click.stop="showFlag"></div>
        <!-- <div class="header_infoBox_chooseClass" v-if="classlist.length>0">{{class_show}}</div> -->
        <div class="header_infoBox" v-if="clickFlag" @mouseleave="hideFlag">
          <!-- <div  class="header_info_li">修改密码</div> -->
          <div @click='loginOut' class="header_info_li">注销登陆</div>
          <div @click='changePassword' class="header_info_li">修改密码</div>
          <i class="header_infoBox_sign"></i>
        </div>
      </div>
    </header>
    <div class="main bx">
      <nav>
        <ul>
          <li v-for="(item,index) in items" :class="activeStutas==index?'active':''" v-if="item.showFlag">
            <router-link :to="item.path">
              <img :src="activeStutas==index?item.urlActive:item.url" :alt="item.name" srcset="">{{item.name}}
            </router-link>
          </li>
        </ul>
      </nav>
      <main>
        <transition name='fade' mode='out-in'>
          <!-- <keep-alive> -->
          <router-view v-on:pageName='changeActiveStutas'></router-view>
          <!-- </keep-alive> -->
        </transition>
      </main>
    </div>
    <div class="mask" style="z-index: 100;background: rgba(0,0,0,0.2);position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;">
    </div>
    <div class="common_alertBox changePassword" v-if="changePasswordFlag">
      <div class="common_alertBox_header">
        <span>修改密码</span>
      </div>

      <div class="common_alertBox_content">
        <div class="common_alertBox_li alert_center">
          <div class="common_alertBox_li_alert_center">
            <span class="importentIcon">原密码:</span>
            <div class="chooseBox paddingInput">
              <input v-model="oldPassword" @focus='onFocus' :type='typeText'>
            </div>
          </div>

        </div>
        <div class="common_alertBox_li alert_center ">
          <div class="common_alertBox_li_alert_center ">
            <span class="importentIcon">新密码:</span>
            <div class="chooseBox paddingInput">
              <input v-model="newPassword" @focus='onFocus' :type='typeText'>
            </div>
          </div>

        </div>
        <div class="common_alertBox_li alert_center ">
          <div class="common_alertBox_li_alert_center ">
            <span class="importentIcon">确认密码:</span>
            <div class="chooseBox paddingInput">
              <input v-model="surePassword" @focus='onFocus' :type='typeText'>
            </div>
          </div>

        </div>
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addImageSureBtn" v-if="!editorFlag">保存</div> -->
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="editorSureBtn" v-if="editorFlag">修改</div> -->
        <!-- <div class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</div> -->

        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="editorSureFlag" @click="editorSure">修改</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    http
  } from "../api/config";
  import CryptoJS from 'crypto-js/crypto-js';
  export default {
    name: 'App',
    data() {
      return {
        items: [{
          name: '首页',
          path: '/home',
          url: './static/images/home.png',
          urlActive: './static/images/homeActive.png',
          showFlag: true
        }, {
          name: '系统设置',
          path: '/systemSet',
          url: './static/images/set.png',
          urlActive: './static/images/setActive.png',
          showFlag: true
        }, {
          name: '机构管理',
          path: '/mechanism',
          url: './static/images/mechanism.png',
          urlActive: './static/images/mechanismActive.png',
          showFlag: true
        }, {
          name: '校园管理',
          path: '/campus',
          url: './static/images/school.png',
          urlActive: './static/images/schoolActive.png',
          showFlag: true
        }, {
          name: '我的班级',
          path: '/mine',
          url: './static/images/mine.png',
          urlActive: './static/images/mineActive.png',
          showFlag: true
        }, ],
        activeStutas: 0,
        name: '',
        clickFlag: false,
        class_id_list: [],
        editorSureFlag: false,
        changePasswordFlag: false,
        oldPassword: '',
        newPassword: '',
        surePassword: '',
        typeText: 'text',
        name:'管理员',
        

      }
    },
    methods: {
      cancelBtn() {
        this.changePasswordFlag = false;
        this.editorSureFlag = false;
        this.typeText = 'text';
        this.oldPassword = '';
        this.newPassword = '';
        this.surePassword = '';
        $('.mask').hide();
      },
      onFocus() {
        this.typeText = 'password';
      },
      editorSure() {
        if (this.trim(this.oldPassword) === '') {
          this.$message.error('原密码不能为空');
          return;
        } else if (this.trim(this.newPassword) === '') {
          this.$message.error('新密码不能为空');
          return;
        } else if (this.trim(this.surePassword) === '') {
          this.$message.error('请再次重复密码');
          return;

        }
        let _this = this;
        // let old=_this.oldPassword;
        let old = CryptoJS.HmacSHA256(_this.oldPassword, 'lonbon').toString();
        // let newPassword=_this.newPassword;
        let newPassword = CryptoJS.HmacSHA256(_this.newPassword, 'lonbon').toString();;
        // let renew=_this.surePassword;
        let renew = CryptoJS.HmacSHA256(_this.surePassword, 'lonbon').toString();;
        _this.editorSureFlag = true;
   
      },
      changeActiveStutas: function (data) {
        switch (data) {
          case 'home':
            this.activeStutas = 0;
            break;
          case 'systemSet':
            this.activeStutas = 1;
            break;
          case 'basicSetup':
            this.activeStutas = 1;
            break;
          case 'serverSetup':
            this.activeStutas = 1;
            break;
          case 'teacher':
            this.activeStutas = 2;
            break;
          case 'student':
            this.activeStutas = 2;
            break;
          case 'classes':
            this.activeStutas = 2;
            break;
          case 'mechanism':
            this.activeStutas = 2;
            break;
          case 'term':
            this.activeStutas = 2;
            break;
          case 'campus':
            this.activeStutas = 3;
            break;
          case 'honor':
            this.activeStutas = 3;
            break;
          case 'schoolNotice':
            this.activeStutas = 3;
            break;
          case 'moralityAssessment':
            this.activeStutas = 3;
            break;
          case 'attendance':
            this.activeStutas = 3;
            break;
          case 'mine':
            this.activeStutas = 4;
            break;
          case 'classAlbum':
            this.activeStutas = 4;
            break;
          case 'classInformation':
            this.activeStutas = 4;
            break;
          case 'timetable':
            this.activeStutas = 4;
            break;
          case 'testScore':
            this.activeStutas = 4;
            break;
          case 'homework':
            this.activeStutas = 4;
            break;
          case 'attendanceStatistics':
            this.activeStutas = 4;
            break;
        }
      },
      showFlag() {
        this.clickFlag = true; //点击个人信息阀门
      },
      hideFlag() {
        this.clickFlag = false;
      },
      changePassword() {
        this.changePasswordFlag = true;
        $('.mask').show();
      },
      // checkLogin() {
      //   let token = this.$store.state.token;
      //   if (token) {
      //     console.log(token)
      //   } else {
      //     this.$store.commit('getLoginData'); //获取数据
      //     if (this.$store.state.token) {
      //       console.log(1)
      //     } else {
      //       this.$router.push({
      //         path: '/login'
      //       });
      //     }
      //   }
      // },
      loginOut() { //退出登录
        let _this = this;


      },
      goLogin(res) {
        let _this = this;
        localStorage.removeItem('classlist');
        localStorage.removeItem('info');
        localStorage.removeItem('token');
        localStorage.removeItem('class_data');
        _this.$message({ //成功返回
          message: res,
          type: 'success',
          duration: 888
        });
        setTimeout(() => {
          _this.$router.push({
            path: '/login'
          });
        }, 500)
      },
      handleCommand(command) {
        this.class_data = command;
        //console.log(command)

      },

      moreSetupMenuRemove() { // 移除操作
        this.clickFlag = false;
      },

    },
    mounted: function () {
      this.globalClick(this.moreSetupMenuRemove);
    },


  }

</script>

<style>
  #main {
    width: 100%;
    height: 100%;
    padding-top: 96px;
  }



  .common_alertBox.changePassword {
    width: 731px;
    height: 383px;
  }

  .common_alertBox.changePassword .common_alertBox_header {
    margin: 0;
  }

  .common_alertBox.changePassword .common_alertBox_footer {
    padding-bottom: 35px;
  }

  .common_alertBox.changePassword .common_alertBox_content {
    padding-right: 126px;
  }

  .common_alertBox.changePassword .common_alertBox_li_alert_center {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .common_alertBox.changePassword .chooseBox.paddingInput {
    width: 356px;
  }

</style>
